<template>
	<div class="content">
		<div class="topBox">
			<div class="imgBox">
				<image src="/static/images/logo2.png"></image>
			</div>
		</div>
		<div class="contentBox">
			<div class="bodyTop">
				<span>{{ $t('connectabledevices') }}</span>
			</div>
			<div class="bodyCenter">
				<up-grid :border="false" col="4" v-if="list.length > 0">
					<up-grid-item v-for="(listItem, listIndex) in list" :key="listIndex"
						@click="gridClick(listItem, listIndex)">
						<image v-if="listItem.connected" src="/static/images/logo2.png"></image>
						<div v-else class="image-container">
							<image class="showPlus" src="/static/images/logo2.png"></image>
							<div class="overlay">
								<u-icon name="plus" color="#fff"></u-icon>
							</div>
						</div>
						<text class="grid-text">{{ getNameMapping(listItem) }}</text>
					</up-grid-item>
				</up-grid>
				<div class="noData" v-else>{{ $t('Noequipment') }}</div>
			</div>
			<div class="btn" v-if="!btnState">
				<up-button size="large" @click="startBluetoothDiscovery(0)">{{ $t('Refreshdevicelist') }}</up-button>
			</div>
			<div class="btn btnNull" v-else>
				<up-button size="large">{{ $t('Refreshingdevicelist') }}</up-button>
			</div>
		</div>
		<up-popup :show="show" mode="bottom" @close="close" @open="open">
			<view>
				<div class="popupBox">
					<div class="boxMain">
						<div class="popupTop">
							<span>{{ $t('networkconnection') }}</span>
							<!-- @click="headleUserImg" -->
							<div class="right">
								<span>{{ getNameMapping(itemData) }}</span>
								<image src="/static/images/pen.png" @click="headlePen">
								</image>
								<image src="/static/images/del.png" @click="headleDel">
								</image>
								<!-- <image src="/static/images/dog.jpg"></image> -->
							</div>
						</div>
						<div class="text">
							<span>{{ $t('Pleaseselect') }}</span>
						</div>
						<div class="popList">
							<scroll-view class="scroll" scroll-y="true" @touchmove.stop>
								<li v-for="(item, index) in wifiList" :key="index" @click="wifiSelect(item)">
									<span>{{ item.name }}</span>
									<!-- <span>强度：{{ item.signalStrength }}</span> -->
									<image :src="getSignalImage(item.signalStrength)">
									</image>
								</li>
							</scroll-view>
						</div>
						<div class="wifiInput">
							<div class="wifiName">
								<span>{{ wifiData }}</span>
								<image :src="getSignalImage(wifiRssi)"></image>
							</div>
							<div class="wifiPossWord">
								<up-input :password="!passShow" clearable v-model="wifiPossWord1"
									:adjust-position="true" :placeholder="$t('Pleaseenterpassword')"
									style="flex: 1;"></up-input>
								<div class="eyeBox">
									<up-icon name="eye-fill" size="22" v-if="passShow"
										@click="passShow = !passShow"></up-icon>
									<up-icon name="eye-off" size="22" v-else @click="passShow = !passShow"></up-icon>
								</div>
							</div>
						</div>
						<div class="wifiBtn">
							<up-button size="large" :loading="joinWifiIng" :loadingText="$t('Distributionnetwork')"
								@click="joinWifi">{{ $t('join') }}</up-button>
							<up-button class="closeTCC" size="large" @click="close">{{ $t('closed') }}</up-button>
						</div>
					</div>
				</div>
			</view>
		</up-popup>
		<up-popup :show="show2" mode="bottom" @close="close2" @open="open2">
			<view>
				<div class="popupBox2">
					<div class="popupTop">
						<span>{{ $t('ConfigureChangeNetwork') }}</span>
						<span style="font-size: 28rpx;">{{ $t('networkwith') }}</span>
					</div>
					<div class="boxMain2">
						<div class="left" @click="headleUserImg">
							<image src="/static/images/dog.jpg"></image>
							<span>{{ $t('username') }}</span>
							<image style="width: 30rpx;height: 30rpx;" src="/static/images/pen.png" @click="headlePen">
							</image>
						</div>
						<div class="right">
							<span>{{ $t('deletedevice') }}</span>
							<image src="/static/images/del.png"></image>
						</div>
					</div>
					<div class="footle">
						<span>{{ $t('Moredevelopment') }}</span>
					</div>
				</div>
			</view>
		</up-popup>
		<!-- 授权弹窗 -->
		<up-popup :show="show3" mode="bottom" @close="close3" @open="open3">
			<view>
				<div class="popupBox3">
					<div class="head">
						<span class="head1">{{ $t('getpermissions') }}</span><br>
						<span class="head2">{{ $t('Obtaining') }}</span>
					</div>
					<div class="pb3body">
						<div class="bodyItem">
							<div class="bodyItemleft">
								<image src="/static/images/dlwztb.png"></image>
							</div>
							<div class="bodyItemright">
								<span class="bodyItemright1">{{ $t('Accesslocationpermissions') }}</span><br>
								<span class="bodyItemright2">{{ $t('UsedtoWiFilists') }}</span>
							</div>
						</div>
						<div class="bodyItem">
							<div class="bodyItemleft">
								<image src="/static/images/lytb.png"></image>
							</div>
							<div class="bodyItemright">
								<span class="bodyItemright1">{{ $t('AccessBluetoothpermissions') }}</span><br>
								<span class="bodyItemright2">{{ $t('Usedtopermissions') }}</span>
							</div>
						</div>
						<!-- <div class="bodyItem">
							<div class="bodyItemleft">
								<image src="/static/images/wifitb.png"></image>
							</div>
							<div class="bodyItemright">
								<span class="bodyItemright1">访问Wi-Fi权限</span><br>
								<span class="bodyItemright2">用于搜索附近的设备及显示 Wi-Fi列表等功能。</span>
							</div>
						</div> -->
						<div class="bodyBtnList">
							<up-button size="large" @click="getAllpermissions()">{{ $t('continue') }}</up-button>
							<span @click="show3 = false">{{ $t('useLater') }}</span>
						</div>
					</div>
				</div>
			</view>
		</up-popup>
		<upModal :modalShow="modalShow" :modalTitle="modalTitle" :modalText1="modalText1" :showImage="true"
			:isInput='true' v-model:inputText='inputText' :inputPlaceholder='t("pleaseenteryourusername")'
			:isCancel="true" @cancel="cancel" @cloos="cloos"></upModal>
		<my-tabbar :tabbarData="2"></my-tabbar>
		<up-toast ref="uToastRef" />
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onBeforeMount } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import myTabbar from '@/components/myTabbar.vue'
import permision from '@/js_sdk/phone/phone.js'
import upModal from '../../components/upModal.vue';
import { getWifiList } from '@/js_sdk/phone/wifi.js'
import { onBackPress } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import * as Aila from '@/uni_modules/sn-uts-aila'// 引用uts插件
const wifiPossWord1 = ref('')
const modalShow = ref(false)
const modalTitle = ref('')
const modalText1 = ref('')
const inputText = ref('')// 弹窗输入框内容
const btnState = ref(false)// 按钮状态
const show = ref(false);
const show2 = ref(false);
const show3 = ref(false);
const passShow = ref(false);
let itemData = ref({})
let itemIndex = ref(0)
// 信号强度对应图标处理
const getSignalImage = (strength) => {
	if (strength >= 66) return '/static/images/xh3.png'
	if (strength >= 33) return '/static/images/xh2.png'
	return '/static/images/xh0.png'
}
const getNameMapping = (data: string) => {// 设备名称映射
	let nameData = uni.getStorageSync(data.mac)
	if (nameData) {
		return nameData
	} else {
		return data.name
	}
}
let paramsPW = ref({
	mac: '',
	ssid: '',
	pass: '',
})
// wifi点击
const wifiSelect = (item: object) => {
	// console.log('item', item);
	wifiData.value = item.name
	wifiRssi.value = item.signalStrength
	paramsPW.value.ssid = item.name
}
const joinWifiIng = ref(false)// 配网加载状态
let timeoutId = ref(null)
// 加入网络(配网)
const joinWifi = () => {
	paramsPW.value.pass = wifiPossWord1.value
	if (!paramsPW.value.ssid) {
		uni.showToast({
			title: t('PleaseselectWiFi'),
			icon: 'none',
			duration: 2000
		})
		return
	} else if (!paramsPW.value.pass) {
		uni.showToast({
			title: t('Pleaseenterpassword'),
			icon: 'none',
			duration: 2000
		})
		return
	}
	// console.log('配网', paramsPW.value);
	const client = Aila.getAilaClient();
	client.configWifi(paramsPW.value);// 配网
	joinWifiIng.value = true
	// 先清除已有计时器（40s配网不成功则为失败）
	if (timeoutId.value) clearTimeout(timeoutId.value)
	timeoutId.value = setTimeout(() => {
		uni.showToast({
			title: t('Networkdistribution'),
			icon: 'none',
			duration: 2000
		});
		joinWifiIng.value = false
	}, 40000)

	// 调用后，500ms后开始扫描蓝牙
	client.onLightHandler((e: object) => {
		// console.log('e', e);
		// #ifdef ANDROID
		switch (e.data.what) {
			case 1: // onDescriptorWrite success
				console.log('case 1');
				break;
			case 2: // 连接发生变化
				// client.getBleList((e: object) => {
				// 	list.value = e.data.list;
				// 	console.log('case 2 蓝牙设备列表', list.value);
				// });
				break;
			case 3: // 连接成功
				uni.showToast({
					title: t('Networkdistributionsuccess'),
					icon: 'none',
					duration: 2000
				});
				joinWifiIng.value = false
				wifiPossWord1.value = ''
				show.value = false

				// list.value=paramsPW.value.mac
				const matchedDevice = list.value.find(
					device => device.mac === paramsPW.value.mac
				)
				if (matchedDevice) {
					matchedDevice.connected = true;
				}
				break;
			case 4: // 连接出错
				uni.showToast({
					title: t('Networkdistribution'),
					icon: 'none',
					duration: 2000
				});
				joinWifiIng.value = false
				break;
			default:
				break;
		}
		// #endif

		// #ifdef IOS
		if (e.data.event == 'ailiDeviceConnect') {
			//连接回调
			//e.data.data.state
			uni.showToast({
				title: t('Networkdistributionsuccess'),
				icon: 'none',
				duration: 2000
			});
			joinWifiIng.value = false
			wifiPossWord1.value = ''
			show.value = false

			// list.value=paramsPW.value.mac
			const matchedDevice = list.value.find(
				device => device.mac === paramsPW.value.mac
			)
			if (matchedDevice) {
				matchedDevice.connected = true;
			}
		} else if (e.data.event == 'ailaDeviceConfigWifistate') {
			//配置wifi回调
			//e.data.data.state
			uni.showToast({
				title: t('Networkdistribution'),
				icon: 'none',
				duration: 2000
			});
			joinWifiIng.value = false
		}
		// #endif
	});
}

// 蓝牙-头
const startBluetoothDiscovery = (number: number) => {
	const BluetoothAdapter = plus.android.importClass('android.bluetooth.BluetoothAdapter'); // 引入Java 蓝牙类
	uni.openBluetoothAdapter({
		success: (res: any) => {
			Aila.requestPermission((e: object) => {// 获取蓝牙权限
				if (e.code == 0) {
					// console.log('成功');
					startService()

					if (number !== 1) {
						btnState.value = true
						// 20秒后关闭按钮状态
						setTimeout(() => {
							btnState.value = false
						}, 20000)
					}
				} else {
					uni.showToast({
						title: t('Permissiondenied'),
						icon: 'none',
						duration: 2000
					});
				}
			})
		},
		fail: (err: any) => {
			console.error(t('Bluetoothmodule'), err);
			uni.showToast({
				title: t('PleaseturnonBluetooth'),
				icon: 'none'
			});
			// 未开启弹出提示框
			uni.showModal({
				title: t('prompt'),
				content: t('istrueBluetooth'),
				showCancel: true,
				cancelText: t('cancel'),
				confirmText: t('confirm'),
				success(res) {
					// 点击确定后通过系统打开蓝牙
					if (res.confirm) {
						const blueadapter = BluetoothAdapter.getDefaultAdapter();
						if (blueadapter != null) {
							return blueadapter.enable();
						}
					} else {
						uni.showToast({
							title: t('Usercancelsoperation'),
							icon: 'none',
							duration: 2000
						});
					}
				}
			})
			// 打开系统应用设置
			// #ifndef MP-WEIXIN
			// uni.openAppAuthorizeSetting({
			// 	success: (res) => {
			// 		console.log('success')
			// 	}
			// })
			// #endif
		}
	});
}
// 启动Aila服务
const startService = () => {
	const client = Aila.getAilaClient();
	client.startService();
	// 调用后，500ms后开始扫描蓝牙
	client.onLightHandler((e: object) => {
		// console.log('lightHandler', e);
		switch (e.data.what) {
			case 1: // onDescriptorWrite success
				break;
			case 2: // 连接发生变化
				// client.getBleList((e: object) => {
				// 	list.value = e.data.list;
				// 	console.log('蓝牙设备列表', list.value);
				// });
				break;
			case 3: // 连接成功
				console.log('连接成功');
				break;
			case 4: // 连接出错
				console.log('连接出错');
				break;
			default:
				break;
		}
	});
	client.getBleList((e: object) => {
		list.value = e.data.list;
		console.log('蓝牙设备列表', list.value);
	});
}
// 蓝牙-尾
const headlePen = () => {
	modalShow.value = true
}
// 删除图标
const headleDel = () => {
	console.log('删除');
	if (itemIndex.value) {
		list.splice(itemIndex.value, 1)
	}
}
const cancel = () => {
	modalShow.value = false
	inputText.value = ''
}
const cloos = (data: string) => {
	if (!inputText.value) {
		uni.showToast({
			title: t('contentcannotbeblank'),
			icon: 'none',
			duration: 2000
		});
		return
	}
	uni.setStorageSync(paramsPW.value.mac, inputText.value)
	list.value = [...list.value]
	modalShow.value = false
	itemData.value.name = inputText.value
	itemData.value = { ...itemData.value }
	inputText.value = ''
}
const wifiPermission = ref({
	granted: false,
	status: 'pending'
});
// 获取权限
const getAllpermissions = () => {
	startBluetoothDiscovery(1)
	checkLocationPermission()
	checkWifiPermission()
	requestLocationPermission()
	checkWifiPermission()
	show3.value = false
}
// 返回键
onBackPress(() => {
	if (show.value) {
		show.value = false;
		return true; //阻止程序退出
	} else {
		return false;
	}
})
onLoad((options: any) => {
	uni.hideTabBar()//  隐藏底部导航栏
})
onShow(() => {
	// #ifndef H5
	uni.openBluetoothAdapter({// 初始化蓝牙模块,判断蓝牙是否开启
		fail: (err) => {
			console.log('搜索失败', err);
			show3.value = true
		}
	})
	// 检查定位权限
	let compat = plus.android.importClass('androidx.core.content.ContextCompat')
	let context = plus.android.runtimeMainActivity()
	let result = compat.checkSelfPermission(context, 'android.permission.ACCESS_FINE_LOCATION')
	if (result != 0) {
		show3.value = true
	}
	// #endif
})
// 检查定位权限
async function requestLocationPermission() {
	plus.android.requestPermissions(
		['android.permission.ACCESS_FINE_LOCATION'],
		function (resultObj) {
			let result = 0;
			for (let i = 0; i < resultObj.granted.length; i++) {
				// console.log('已获取的权限：' + resultObj.granted[i]);
				result = 1;
			}
			for (let i = 0; i < resultObj.deniedPresent.length; i++) {
				console.log('拒绝本次申请的权限：' + resultObj.deniedPresent[i]);
				result = 0;
			}
			for (let i = 0; i < resultObj.deniedAlways.length; i++) {
				console.log('永久拒绝申请的权限：' + resultObj.deniedAlways[i]);
				result = -1;
			}
			if (result != 1) {
				var Intent = plus.android.importClass("android.content.Intent");
				var Settings = plus.android.importClass("android.provider.Settings");
				var Uri = plus.android.importClass("android.net.Uri");
				var mainActivity = plus.android.runtimeMainActivity();
				var intent = new Intent();
				intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
				var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
				intent.setData(uri);
				mainActivity.startActivity(intent);
			}
		},
		function (error) {
			console.log('申请权限错误：' + error.code + " = " + error.message);
		}
	);
}
// 获取定位权限
const checkLocationPermission = async () => {
	uni.getSystemInfo({
		success: function (res) {
			// show.value = false
			// 判断平台，然后跳转到系统定位设置开关
			// var platform = res.platform;
			// if (platform === 'android') {
			// 	var context = plus.android.importClass("android.content.Context");
			// 	var locationManager = plus.android.importClass("android.location.LocationManager");
			// 	var main = plus.android.runtimeMainActivity();
			// 	var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
			let system = uni.getSystemInfoSync()
			if (system.platform === 'android') {
				var context = plus.android.importClass("android.content.Context");
				var locationManager = plus.android.importClass("android.location.LocationManager");
				var main = plus.android.runtimeMainActivity();
				var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
				if (!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)) {
					uni.showModal({
						title: t('prompt'),
						content: t('Pleaseturnservice'),
						showCancel: true,
						cancelText: t('cancel'),
						confirmText: t('confirm'),
						success(res) {
							if (res.confirm) {
								close()
								var Intent = plus.android.importClass('android.content.Intent');
								var Settings = plus.android.importClass('android.provider.Settings');
								var intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS);
								main.startActivity(intent); // 打开系统设置GPS服务页面
							} else {
								close()
								uni.showToast({
									title: t('Usercancelsoperation'),
									icon: 'none',
									duration: 2000
								});
							}
						}
					});
				}
			} else if (system.platform === 'ios') {
				var cllocationManger = plus.ios.import("CLLocationManager");
				var enable = cllocationManger.locationServicesEnabled();
				var status = cllocationManger.authorizationStatus();
				plus.ios.deleteObject(cllocationManger);
				if (!enable || status === 2) {
					uni.showModal({
						title: t('prompt'),
						content: t('Pleaseturnservice'),
						showCancel: true,
						cancelText: t('cancel'),
						confirmText: t('confirm'),
						success(res) {
							if (res.confirm) {
								close()
								var UIApplication = plus.ios.import("UIApplication");
								var application2 = UIApplication.sharedApplication();
								var NSURL2 = plus.ios.import("NSURL");
								var setting2 = NSURL2.URLWithString("App-Prefs:root=Privacy&path=LOCATION");
								application2.openURL(setting2);
								plus.ios.deleteObject(setting2);
								plus.ios.deleteObject(NSURL2);
								plus.ios.deleteObject(application2);
							} else {
								close()
								uni.showToast({
									title: t('Usercancelsoperation'),
									icon: 'none',
									duration: 2000
								});
							}
						}
					});
				}
			}
			// }
		}
	})
};
// wifi权限
const checkWifiPermission = async () => {
	wifiPermission.value = {
		granted: false,
		status: 'checking'
	};
	requestLocationPermission()
	try {
		const result = await permision.requestWifiPermission();
		wifiPermission.value = {
			granted: result.granted,
			status: result.granted ? 'granted' : 'denied',
			...result
		};

		if (result.granted) {
			// console.log('WiFi权限已获取，可以执行相关操作');
			// 这里调用获取WiFi列表的API
			fetchWifiList()
		}
	} catch (error) {
		console.error('权限请求出错:', error);
		wifiPermission.value = {
			granted: false,
			status: 'error',
			error
		};
	}
};
// WiFi列表
let wifiList = ref([]);
const wifiData = ref('');// 当前连接的WiFi信息
const wifiRssi = ref('');// 当前连接的WiFi强度
const loading = ref(false);
let isIos = false;
// #ifdef APP-PLUS
isIos = (plus.os.name == "iOS")
// #endif
const fetchWifiList = async () => {
	wifiList.value = []
	// loading.value = true;
	try {
		uni.getNetworkType({
			success: function (res) {
				// if (res.networkType != "wifi") {
				if (res) {
					// 主窗体  
					var MainActivity = plus.android.runtimeMainActivity()
					// 上下文  
					var Context = plus.android.importClass('android.content.Context')
					// 导入WIFI管理 和 WIFI 信息 的class  
					plus.android.importClass("android.net.wifi.WifiManager")
					plus.android.importClass("android.net.wifi.WifiInfo")
					plus.android.importClass("android.net.wifi.ScanResult")
					plus.android.importClass("java.util.ArrayList")
					// 获取 WIFI 管理实例  
					var wifiManager = MainActivity.getSystemService(Context.WIFI_SERVICE)
					// 获取当前连接WIFI的信息  
					var info = wifiManager.getConnectionInfo()
					// 获取当前 WIFI 连接的 SSID (WIFI 名称)  
					var ssid = info.getSSID()
					// 这里的 获取到的名称 是 带 双引号的 如 "cmcc"    
					// 所以我们这里处理一下  
					ssid = ssid.replace(/(^\"*)|(\"*$)/g, "")
					// wifiData.value = ssid
					// wifiRssi.value = dbmToPercentage(info.getRssi()); // 获取当前连接WiFi的信号强度(RSSI)

					var resultList = wifiManager.getScanResults()
					var tempObj = {}
					var len = resultList.size()
					for (var i = 0; i < len; i++) {
						let ssid = resultList.get(i).plusGetAttribute('SSID');
						let bssid = resultList.get(i).plusGetAttribute('BSSID');
						let level = resultList.get(i).plusGetAttribute('level');
						// 如果这个SSID还没有被记录过
						// 过滤掉空白名称的WiFi
						if (ssid && ssid.trim() !== '') {
							if (!tempObj[ssid]) {
								tempObj[ssid] = true; // 标记为已存在
								let oneWiFi = {
									name: ssid,
									bssid: bssid, // 可选：MAC地址
									signalStrength: dbmToPercentage(level), // 信号强度
								};
								wifiList.value.push(oneWiFi);
							}
						}
					}
				}
			}
		})
	} catch (error) {
		console.error('获取WiFi列表失败:', error);
	} finally {
		loading.value = false;
	}
};
// 将dBm转换为百分比（处理wifi信号强度）
function dbmToPercentage(dbm) {
	if (dbm >= -50) return 100;
	if (dbm <= -100) return 0;
	return 2 * (dbm + 100);
}
onBeforeMount(() => {
	// startBluetoothDiscovery()
})
// 宫格-头
// 蓝牙设备列表
let list = ref([]);
// 创建对子组件的引用  
const uToastRef = ref(null);
// 设备点击方法  
const gridClick = (item: object, index) => {
	if (joinWifiIng.value) return uni.showToast({
		title: t('networkoperation'),
		icon: 'none',
		duration: 2000
	})
	if (uToastRef.value) {
		paramsPW.value.mac = item.mac
		checkLocationPermission()
		checkWifiPermission()
		show.value = true
		itemData.value = item
		itemIndex.value = index
	}
};
function open() {
	// 打开逻辑，比如设置 show 为 true  
	show.value = true;
	// console.log('open');  
}
function close() {
	// 关闭逻辑，设置 show 为 false  
	show.value = false;
	// console.log('close');  
}
function open2() {
	show2.value = true;
}
function close2() {
	show2.value = false;
}
function open3() {
	show3.value = true;
}
function close3() {
	show3.value = false;
}
// 宫格-尾
const headleUserImg = () => {
	show2.value = true;
}
</script>
<style scoped lang="scss">
.content {
	width: 100%;
	height: 100vh;

	.topBox {
		width: 100%;
		height: 25%;
		display: flex;
		justify-content: center;
		align-items: center;

		.imgBox {
			width: 100%;
			height: 70%;
			margin-top: 2.4rem;
			text-align: center;

			image {
				width: 7.375rem;
				height: 7.375rem;
				background-color: #fff;
				border: 4rpx solid #BBBBBB;
				border-radius: 50%;
				box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.6);
			}
		}
	}

	.contentBox {
		width: 100%;
		height: 70%;
		background-color: #fff;
		border-radius: 15px 15px 0% 0%;
		position: relative;

		.bodyTop {
			width: 94%;
			margin: 0 auto;

			span {
				display: inline-block;
				margin: 30rpx 0;
			}
		}

		.bodyCenter {
			width: 92%;
			margin: 0 auto;

			.noData {
				text-align: center;
				color: #9e9e9e;
			}

			image {
				width: 100rpx;
				height: 100rpx;
				background-color: #fff;
				border: 4rpx solid #BBBBBB;
				border-radius: 50%;
				box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.6);
			}

			.image-container {
				position: relative;
				display: inline-block;
			}

			.showPlus {
				display: block;
			}

			.overlay {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
				border-radius: 50%;
				/* 灰色半透明遮罩 */
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.grid-text {
				font-size: 20rpx;
				font-weight: bold;
				margin: 10rpx 0;
			}
		}

		.btn {
			width: 82%;
			position: absolute;
			bottom: 40rpx;
			left: 50%;
			transform: translateX(-50%);

			.u-button {
				color: #fff;
				font-weight: 600;
				font-size: 30rpx;
				border-radius: 10px;
				background-color: #de868f;
				border: 1px solid #bbbbbb;
			}
		}

		.btnNull {
			.u-button {
				background-color: #878787;
				border: 1px solid #bbbbbb;
			}
		}
	}

	.popupBox {
		width: 100%;
		height: 80vh;

		.boxMain {
			width: 100%;
			height: 100%;
			overflow-y: auto;

			.popupTop {
				width: 96%;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 auto;
				font-size: 24rpx;

				.right {
					display: flex;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						background-color: #fff;
						// border: 4rpx solid #BBBBBB;
						// box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.6);
						margin: 15rpx;
					}
				}
			}

			.text {
				text-align: center;
			}

			.popList {
				width: 96%;
				height: 54%;
				margin: 20rpx auto;
				background-color: #F8F8F8;

				.scroll {
					width: 100%;
					height: 100%;
					list-style-type: none;
					padding: 0;
					margin: 0;

					li {
						width: 100%;
						height: 90rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1rpx solid #bbbbbb;

						span {
							max-width: 500rpx;
							display: inline-block;
							margin-left: 30rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						image {
							width: 45rpx;
							height: 45rpx;
							margin-right: 30rpx;
						}
					}
				}
			}

			.wifiInput {
				width: 96%;
				margin: 0 auto;

				.wifiName,
				.wifiPossWord {
					width: 100%;
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					span {
						max-width: 500rpx;
						display: inline-block;
						margin-left: 30rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					image {
						width: 45rpx;
						height: 45rpx;
						margin-right: 30rpx;
					}
				}

				.wifiPossWord {
					width: 94%;
					margin: 20rpx auto;
					position: relative;

					.u-input {
						width: 100%;
						background-color: #F2F2F2;
					}

					.u-input--radius {
						border-radius: 15px;
					}

					.eyeBox {
						position: absolute;
						right: 20rpx;
					}
				}
			}

			.wifiBtn {
				width: 90%;
				margin: 0 auto;

				.u-button {
					color: #fff;
					font-weight: 600;
					border-radius: 10px;
					background-color: #de868f;
					border: 1px solid #bbbbbb;
					margin-bottom: 20rpx;
				}

				.u-button:nth-child(2) {
					background-color: #9e9e9e;
					/* 灰色 */
				}
			}

		}
	}

	.popupBox2 {
		width: 100%;

		.popupTop {
			width: 96%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;
			font-size: 24rpx;
		}

		.boxMain2 {
			width: 90%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background-color: #fff;
					border: 4rpx solid #BBBBBB;
					box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.6);
					margin: 20rpx 20rpx 20rpx 15rpx;
				}
			}

			.right {
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.footle {
			width: 100%;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
		}
	}

	.popupBox3 {
		width: 100%;

		.head {
			width: calc(100% - 40rpx);
			padding: 30rpx 20rpx;

			.head1 {
				width: 100%;
				font-size: 30rpx;
			}

			.head2 {
				width: 100%;
				font-size: 24rpx;
				color: #9E9E9E;
			}
		}

		.pb3body {
			width: 100%;

			.bodyItem {
				border: 1rpx solid #BBBBBB;
				border-radius: 30rpx;
				margin: 0 20rpx 30rpx;
				display: flex;
				align-items: center;

				.bodyItemleft {
					width: 10%;
					display: inline-block;
					margin-left: 3%;

					image {
						width: 60rpx;
						height: 60rpx;
					}
				}

				.bodyItemright {
					width: 87%;
					display: inline-block;
					margin: 20rpx 0;

					.bodyItemright1 {
						font-size: 30rpx;
						font-weight: bold;
					}

					.bodyItemright2 {
						font-size: 24rpx;
						color: #9E9E9E;
					}
				}
			}

			.bodyBtnList {
				width: 96%;
				margin: 0 auto;
				text-align: center;

				.u-button {
					color: #fff;
					font-weight: 600;
					font-size: 30rpx;
					border-radius: 10px;
					background-color: #de868f;
					border: 1px solid #bbbbbb;
				}

				span {
					height: 2rem;
					font-size: 26rpx;
					line-height: 2rem;
					display: inline-block;
					margin: 0.5rem 0;
					color: #9A9A9A;
				}
			}
		}
	}

	::v-deep .u-transition {
		z-index: 99999 !important;
	}
}
</style>